<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <h3 >{{msg}}</h3>
</div>

<div id="app2">
    <h3 >{{a}}</h3>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            msg:"hello"
        },
        methods:{

        }
    });
    var data1={a:1};
   // Object.freeze(data1);阻止交互，data1.a=123这时app2.a还是等于1
    var app2 = new Vue({
        el: '#app2',
        data:data1,//app2.a==data.a
        methods:{

        }
    });
    //参考API  https://cn.vuejs.org/v2/api/
    // app2.$el
    // <div id=​"app2">​…​</div>​
    // app2.$data
    // {a: 1}


    //在外面可以直接调用data1的属性
    app2.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `app2.a` 改变后调用
        alert(newValue+"   -----   "+oldValue);
    })
</script>
</body>
</html>
